import React, { Component, Fragment } from "react";
// antd
import { Modal, Table, Button, Col, Pagination, Select, Form, Input, message } from "antd";
import Action from "@c/buttonAction/Index";
// http
import http from '../../utils/request';


const { Option } = Select;
//const children = [];


class MenuManage extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            // 复选框数据
            selectedRowKeys: [],
            dataSource: [],
            columns: [
                {title: "ID", dataIndex: "id", key: "id"},
                {title: "菜单名称", dataIndex: "title", key: "title"},
                {title: "组件类型", dataIndex: "is_child", key: "is_child",
                    render: (text, rowData) => {
                        const is_child = rowData.is_child
                        const display = is_child ? '子菜单' : '父菜单'
                        return(
                            display
                            // <div>{ is_child ? <UserOutlined style={{ fontSize: '16px' }} /> : <UsergroupDeleteOutlined style={{ fontSize: '18px' }} /> }</div>
                        )
                    }
                },
                {title: "菜单路径", dataIndex: "key", key: "key"},
                {title: "操作", dataIndex: "operation", key: "operation", width: 200,
                    render: (text, rowData) => {
                        return (
                            <div className="inline-button">
                                <Action>
                                    <Action.Button onClick={() => this.onEditMenuBtn({menu_id: rowData.id, status: true})}>编辑</Action.Button>
                                    <Action.Button onClick={() => this.onDeleteMenuBtn(rowData)}>删除</Action.Button>
                                </Action>
                            </div>
                        )
                    }
                }
            ],
            visible_edit: false,
            visible_delete: false,
            visible_add: false,
            disabled_editdisabled: false,
            disabled_add: false,
            menu_id: '',
            menu_title: '',
            menu_type: '',
            menu_children: [],
            menu_children_add: [],
            loading: false,
            search_menu_title: null,
            search_menu_key: null,
 
        };
        this.formRef = React.createRef();
        this.formRefAdd = React.createRef();
    }

    componentDidMount() {
        this.loadData()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'title__contains': this.state.search_menu_title,
            'key__contains': this.state.search_menu_key,
        }
        // 获取菜单列表
        http.get('/menu', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    /** 复选框 */
    onCheckbox = (selectedRowKeys) => {
        this.setState({
            selectedRowKeys: selectedRowKeys
        })
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }
    /** 菜单删除按钮 */
    onDeleteMenuBtn = (data) => {
        this.setState({
            visible_delete: true,
            menu_id: data.id,
            menu_title: data.title,
        })
    }    

    /** 菜单编辑按钮 */
    onEditMenuBtn = (data) => {
        this.setState({
            visible_edit: true
        })

        // 修改菜单信息
        http.get('/menu/' + data.menu_id).then(response=>{
            const menu_data = response.data.menu
            const menu_parent_list = response.data.menu_parent_list
            const children = []
            for (let i = 0; i < menu_parent_list.length ; i++) {
                children.push(<Option key={menu_parent_list[i].id}>{menu_parent_list[i].title}</Option>);
            }
            this.setState({
                menu_children: children
            })

            menu_data.is_child ? this.setState({
                disabled_edit: false,
                // menu_type: '子菜单'
            }) : this.setState({
                disabled_edit: true,
                // menu_type: '父菜单'
            })

            this.formRef.current.setFieldsValue({
                id: menu_data.id,
                title: menu_data.title,
                key: menu_data.key,
                icon: menu_data.icon,
                is_child: menu_data.is_child,
                parent_id: menu_data.parent_id,
                disabled_edit: false,
            })     
        }).catch()
    }

    /** 菜单编辑提交 */
    onFinishEdit = (data) => {
        const requestData = {
            'id': data.id,
            'title': data.title,
            'key': data.key,
            'parent_id': data.parent_id,
            'is_child': data.is_child,
        }
        http.put('/menu/' + data.id, requestData).then(response=>{
            message.info(response.data.msg)
            this.setState({
                visible_edit: false
            })
            this.loadData()
        }).catch()
    }

    /** 菜单编辑Modal隐藏 */
    handleCancel = () => {
        this.setState({
            visible_edit: false
        })
    }

    /** 菜单删除提交 */
    handleMenuDelete = () => {
        http.delete('/menu/' + this.state.menu_id).then(response=>{
            this.setState({
                visible_delete: false,
            })
            this.loadData()
        }).catch()
    }

    /** 菜单添加按钮 */
    onAddMenuBtn = () => {
        http.get('/menu/list').then(response=>{
            const data = response.data.data
            const children = []
            for (let i = 0; i < data.length ; i++) {
                children.push(<Option key={data[i].id}>{data[i].title}</Option>);
            }
            this.setState({
                menu_children_add: children,
                visible_add: true
            })
        }).catch()  
    }

    /** 菜单添加提交 */
    onFinishAdd = (data) => {
        const requestData = {
            'title': data.title,
            'key': data.key,
            'parent_id': data.parent_id,
            'is_child': data.is_child,
        }
        http.post('/menu', requestData).then(response=>{
            message.info(response.data.msg)
            this.setState({
                visible_add: false,
            })
            this.formRefAdd.current.resetFields()
            this.loadData()
        }).catch()
    }

    /** 菜单添加取消 */
    onFinishAddCancel = () => {
        this.setState({
            visible_add: false
        })
        this.formRefAdd.current.resetFields()
    }

    /** 菜单搜索功能 */
    onFinishSearch = (data) => {
        this.setState({
            search_menu_title: data.title ? data.title : null,
            search_menu_key: data.key ? data.key : null,
            page: 1
        })
        this.loadData()
    }

    render(){
        const { columns, dataSource, total, page, visible_edit, visible_delete, visible_add, disabled_edit, disabled_add, menu_children, menu_children_add, menu_title, loading } = this.state
        const rowSelection = {
            onChange: this.onCheckbox
        }
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch}>
                    <Form.Item label="菜单名称" name="title">
                        <Input placeholder="请输入菜单名称"  />
                    </Form.Item>
                    <Form.Item label="菜单路径" name="key">
                        <Input placeholder="请输入菜单路径"  />
                    </Form.Item>
                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>
                <div style={myStyle1}><Button type="primary" onClick={this.onAddMenuBtn}>添加菜单</Button></div>
                <Table
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    scroll={{ y: 500, x: '70vw' }}
                    loading={loading}
                >
                </Table>
                
                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

                <Modal
                    title="菜单编辑"
                    visible={visible_edit}
                    onCancel={this.handleCancel}
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishEdit}
                        ref={this.formRef}
                    >
                        <Form.Item label="菜单ID" name="id" hidden>
                            <Input disabled></Input>
                        </Form.Item>
                        <Form.Item label="菜单名称" name="title">
                            <Input ></Input>
                        </Form.Item>
                        <Form.Item label="菜单图标" name="icon" hidden>
                            <Input disabled></Input>
                        </Form.Item>
                        <Form.Item label="菜单路径" name="key">
                            <Input ></Input>
                        </Form.Item>
                        <Form.Item label="菜单类别" name="is_child" hidden>
                            <Input disabled></Input>
                        </Form.Item>   
                        <Form.Item label="菜单父级" name="parent_id">
                            <Select
                                allowClear
                                style={{ width: '100%' }}
                                placeholder="父级菜单不可选中"
                                disabled={disabled_edit}
                            >
                                    {menu_children}
                            </Select>    
                        </Form.Item>
                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>                
                </Modal>

                <Modal
                    title="添加菜单"
                    visible={visible_add}
                    onCancel={this.onFinishAddCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishAdd}
                        ref={this.formRefAdd}
                    >
                        <Form.Item label="菜单名称" name="title">
                            <Input ></Input>
                        </Form.Item>
                        <Form.Item label="菜单图标" name="icon">
                            <Input disabled></Input>
                        </Form.Item>
                        <Form.Item label="菜单路径" name="key">
                            <Input ></Input>
                        </Form.Item>
                        <Form.Item label="菜单类别" name="is_child">
                            <Select
                                placeholder="选择菜单类型"
                            >
                                <Option key={false}>父菜单</Option>
                                <Option key={true}>子菜单</Option>
                            </Select>
                        </Form.Item>   
                        <Form.Item label="菜单父级" name="parent_id">
                            <Select
                                allowClear
                                style={{ width: '100%' }}
                                placeholder="父菜单无需选择"
                                disabled={disabled_add}
                            >
                                    {menu_children_add}
                            </Select>    
                        </Form.Item>
                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="删除菜单"
                    visible={visible_delete}
                    onOk={this.handleMenuDelete}
                    onCancel={() => {this.setState({visible_delete: false, menu_id: ''})}}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确定删除菜单<span style={{color: 'red'}}> {menu_title}</span>? 删除后将无法恢复</p>
                </Modal>

            </Fragment>
        )
    }
}
export default MenuManage;